<template>
  <div>
    <Form inline :label-colon="true" class="search-form" :label-width="120">
      <FormItem label="备份文件名称">
        <Input v-model="formValidate.backupName" placeholder="请输入备份文件名称"/>
      </FormItem>
      <FormItem :label-width="0">
        <Button
          type="primary"
          v-auth="'列表'"
          @click="publicGetData(0)"
          style="margin-right: 10px"
        >搜索
        </Button>
        <Button
        v-auth="'备份'"
         type="primary" style="margin-right: 10px;" @click="publicUpdateData">备份</Button>
      </FormItem>
    </Form>
    <Breadcrumb></Breadcrumb>
    <BaseTable
      ref="baseTable"
      :action="action.readUserByPage"
      :columns="columns"
      :menu-code="menuCode"
      :isShowBtn="[]"
    />
    <!--新增和编辑弹出层-->
    <Drawer
      title="新增-文件备份"
      v-model="viewParams.flag"
      @on-visible-change="publicChangeClose"
      width="35%"
      draggable
    >
      <Update
        :type="type"
        :moduleId="backupId"
        :idName="idName"
        @closeView="publicCloseView"
        v-if="viewParams.flag"
      />
    </Drawer>
  </div>
</template>

<script>
import { tableMixin } from '../../../mixin'
import API_KEY from '../../../api/index'
import BaseUtil from '../../../utils/BaseUtil'

export default {
  name: 'BackupFileList',
  mixins: [tableMixin],
  data () {
    return {
      // 表单数据(使用混入formValidate不能变)
      formValidate: {
        // 表单输入框数据双向绑定
        backupName: ''
      },
      menuCode: 'log-backupFile',
      fileFormat: ['sql', 'log'],
      maxSize: 10 * 1024,
      action: {
        // 根据分页参数获取表格数据接口（查询表格数据只需要readMenuByPage参数和columns参数）
        readUserByPage: API_KEY.syslogBackupFile.page,
        importBackup: API_KEY.fileBasisHistoricalDown.importBackup
      },
      columns: [{
        title: '备份文件名称',
        key: 'backupName',
        minWidth: 210
      }, {
        title: '文件大小',
        minWidth: 100,
        key: 'fileSizeStr',
        render: (h, params) => {
          return h('span', BaseUtil.getFileSize(params.row.fileSize))
        }
      }, {
        title: '开始时间',
        minWidth: 120,
        key: 'startDate'
      }, {
        title: '结束时间',
        minWidth: 120,
        key: 'endDate'
      }, {
        title: '备份人',
        key: 'createUserName',
        minWidth: 120
      }, {
        title: '备份时间',
        key: 'gmtCreate',
        minWidth: 180
      }, {
        title: '操作',
        fixed: 'right',
        align: 'center',
        minWidth: 100,
        render: (h, params) => {
          // params.row
          return h('div', [
            h('Button', {
              props: {
                type: 'primary',
                size: 'small',
                ghost: 'ghost'
              },
              style: {
                marginRight: '5px',
                borderRadius: '32px'
              },
              on: {
                click: () => {
                  this.downFile(params.row)
                }
              }
            }, '下载')
          ])
        }
      }],
      idName: 'backupId',
      backupId: '',
      // 弹出视图标题的后缀
      suffix: '文件备份',
      // 查看详情弹出层参数
      drawerParams: {
        flag: false,
        // 当前id为查看时使用,上方menuId为编辑和新增时使用
        backupId: ''
      }
    }
  },
  methods: {
    downFile (row) {
      BaseUtil.downBackupFile(row.backupPath)
    },
    onSuccess (params) {
    },
    publicChangeClose (val) {
    }

  },
  components: {
    Update: () => import('./Update')
  }

}
</script>

<style scoped>

</style>
